<template>
	<view>
		<view class="hot_package_box">
			<view class="hot_package_line"></view>
			<view class="hot_package_title">秒返专区</view>
		</view>
		<view class="home_package_box" v-for="(item, index) in packageList" :key="index">
			<view class="home_package_all">
				<view class="package_top_img">
					<image src="/static/home/icon-top-one.png" mode="" class="top_img" v-if="index == 0"></image>
					<image src="/static/home/icon-top-two.png" mode="" class="top_img" v-else-if="index == 1"></image>
					<image src="/static/home/icon-top-three.png" mode="" class="top_img" v-else-if="index == 2"></image>
				</view>

				<view class="package_all_box" @click="handleShowAge(item, index)">
					<image :src="item.cover_img" mode="" class="package_all_img"></image>
				</view>
				<view class="package_all_con">
					<view class="package_title" @click="handleShowAge(item, index)">
						{{ item.name }}
					</view>
					<view class="pacakge_tip_box" v-if="item.tag_ids">
						<view class="pacakge_tip_all" :style="{ color: itemTag.font_color, border: `1px solid ${itemTag.background_color}` }" v-for="itemTag in item.tag_ids">
							{{ itemTag.tag }}
						</view>
					</view>

					<view class="package_flow_box" v-if="item.data_quota && item.call_duration" @click="handleShowAge(item, index)">
						<view class="package_flow">
							<view class="flow_title">{{ item.data_quota }}G</view>
							<view class="flow_name">流量</view>
						</view>

						<view class="flow_line"></view>

						<view class="package_flow">
							<view class="flow_title">{{ item.call_duration }}分钟</view>
							<view class="flow_name">通话</view>
						</view>
					</view>
				</view>
			</view>

			<view class="package_bottom_box">
				<view class="package_tip" @click="handleShowAge(item, index)">产品亮点：{{ item.bright }}</view>
				<view class="" style="display: flex; justify-content: space-between; align-items: center">
					<view class="package_commission">佣金 ￥{{ item.yj }}</view>
					<view class="package_btn_box">
						<view class="package_btn" @click="handlerPackage(item, index)">立即推广</view>
					</view>
				</view>
			</view>
			<view class="home_package_other" v-if="isShowAge == item.id">
				<view class="handle_age_box">
					<view class="age_icon_box">
						<image src="/static/home/icon-commission.png" mode="" class="age_icon"></image>
					</view>

					<view class="age_title">佣金政策：{{ item.yjzc }}</view>
				</view>
				<view class="handle_age_box">
					<view class="age_icon_box">
						<image :src="cardIcon" mode="" class="age_icon"></image>
					</view>
					<view class="age_title">办理年龄: {{ item.min_age }}-{{ item.max_age }}岁</view>
				</view>

				<view class="handle_age_box">
					<view class="age_icon_box">
						<image :src="addressIcon" mode="" class="age_icon"></image>
					</view>
					<view class="age_title" v-if="item.noly_delivery_area">只发货地址: {{ item.noly_delivery_area }}</view>
					<view class="age_title" v-else>不发货地址: {{ item.sensitive_areas }}</view>
				</view>
			</view>
		</view>

		<!-- 到底啦 -->
		<view class="bottom_box" v-if="pageObj.pageNow == total">----- 暂无更多数据 -----</view>

		<!-- 公众号二维码弹窗 -->
		<u-popup v-model="showOfficialAccount" mode="center" border-radius="12">
			<view class="popup_official_box">
				<canvas style="width: 100%; height: 100%" canvas-id="code">
					<img :src="officialAccountImg" alt="" class="popup_official_img" />
				</canvas>
			</view>
			<view class="popup_official_title">请先关注公众号</view>
		</u-popup>

		<!-- 产品知识库弹窗 -->
		<u-popup v-model="showKnowledgeBase" mode="center" :closeable="true" close-icon-color="#000" border-radius="12" width="680" height="1000">
			<view class="" style="padding: 90rpx 20rpx 50rpx">
				<u-parse :html="knowledgeDetail"></u-parse>
			</view>
		</u-popup>

		<!-- 分享弹窗 -->
		<u-popup v-model="showPopupShare" mode="center" border-radius="12" z-index="1">
			<view class="popup_share_box">
				<view class="share_img_box">
					<!-- <canvas style="width: 100%;height:100%;" canvas-id="code">
							<img :src="promotionImg" alt="" class="share_img" />
						</canvas> -->
					<image :src="promotionImg" mode="" class="share_img" :show-menu-by-longpress="true"></image>
				</view>
				<view class="share_btn_box">
					<view class="share_btn_all" @click="handleShare('保存本地')">
						<view class="share_btn_img">
							<image src="/static/home/icon-save.png" mode="" class="btn_img"></image>
						</view>
						<view class="share_btn_title">保存本地</view>
					</view>

					<view class="share_btn_all" @click="handleShare('复制链接')">
						<view class="share_btn_img">
							<image src="/static/home/icon-copy.png" mode="" class="btn_img"></image>
						</view>
						<view class="share_btn_title">复制链接</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: '',
			pageObj: {
				pageNow: 1,
				pageSize: 10
			},
			total: null,
			packageList: [],
			isShowAge: null,
			showOfficialAccount: false,
			showKnowledgeBase: false,
			knowledgeDetail: '',
			officialAccountImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/lunbo_image/660ccdfd97e61_1712115197.jpg',
			promotionImg: '',
			promotionSahreImg: '',
			promotionSahreUrl: '',
			showPopupShare: false,
			knowledgeId: '',
			addressIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a62b11722_1727505963.png',
			cardIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a68fde7ba_1727506063.png'
		};
	},
	onLoad(options) {
		this.type = options.type;
		this.getPackageList();

		if (this.pageObj.pageNow == this.total) {
			return;
		}
	},
	// 分享好友
	onShareAppMessage(res) {
		if (res.from === 'button') {
		}
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {},
			fail(res) {}
		};
	},

	// 分享朋友圈
	onShareTimeline(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				uni.showToast({
					title: '分享成功',
					icon: 'success'
				});
			},
			fail(err) {
				uni.showToast({
					title: '分享失败',
					icon: 'error'
				});
			}
		};
	},
	onReachBottom() {
		if (this.pageObj.pageNow < this.total) {
			this.pageObj.pageNow++;
			this.getPackageList();
		} else if (this.pageObj.pageNow == this.total) {
			return;
		}
	},
	methods: {
		handleShowAge(item, index) {
			// if (!this.isShowAge) {
			// 	this.isShowAge = item.id
			// } else {
			// 	this.isShowAge = null
			// }
			this.knowledgeId = item.id;
			this.getPackageKnowledge();
		},

		//方法：用来判断是否是微信内置的浏览器
		isWechat() {
			return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger';
		},

		// 获取秒返专区
		getPackageList() {
			this.$request(
				'/api/getProductCenter',
				{
					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize,
					operator_id: 0,
					rebate_type: 2
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					res.data.forEach((item) => {
						this.packageList.push(item);
					});

					this.total = res.page_info.page_count;
					this.userToken = uni.getStorageSync('h5-token');
					uni.stopPullDownRefresh();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 是否需要关注公众号
		getFxuserIsFollow() {
			this.$request('/api/getFxuserIsFollow', {}, 'GET').then((res) => {
				if (res.code == 1) {
					if (res.data == 0) {
						// 不用关注
						this.getOncePackageShareImg();
						this.showPopupShare = true;
					} else {
						// 要关注
						this.getFxuserIsSubscribe();
					}
				} else {
					uni.showToast({
						title: '获取失败',
						icon: 'none'
					});
					return;
				}
			});
		},

		// 获取套餐二维码
		getOncePackageShareImg() {
			const timestamp = new Date().getTime();
			let token = uni.getStorageSync('h5-token');
			let isAgent = uni.getStorageSync('h5-isAgent');
			uni.request({
				url: 'https://saler.jkcae.com/app/api/getPackageFxPoster?package_id=' + this.packageId + '&type=' + 1,
				method: 'GET',
				header: {
					Authorization: token,
					Platform: isAgent == 0 ? 2 : 1
				},
				success: (res) => {
					if (res.data.code == 1) {
						uni.hideLoading();
						this.promotionImg = res.data.data + '?v=' + timestamp;
						this.promotionSahreImg = res.data.data;
						this.promotionSahreUrl = res.data.url;
						// this.promotionSahreUrl = '?' + res.data.url
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return;
					}
				}
			});
		},

		// 是否关注公众号
		getFxuserIsSubscribe() {
			this.$request('/api/getFxuserIsSubscribe', {}, 'GET').then((res) => {
				if (res.code == 1) {
					this.isFollow = res.data;
					if (this.isFollow == false) {
						this.showOfficialAccount = true;
					} else {
						uni.showLoading({
							title: '正在加载中'
						});
						// this.packageId = val.id
						// this.packageDetailObj = val
						// this.getOncePackageLink()
						this.getOncePackageShareImg();
						this.showPopupShare = true;
					}
				} else {
					this.showOfficialAccount = true;
					return;
				}
			});
		},

		// 点击立即推广
		handlerPackage(val) {
			const that = this;
			this.packageId = val.id;
			this.packageDetailObj = val;
			if (!uni.getStorageSync('h5-token')) {
				uni.showToast({
					title: '请先注册',
					icon: 'none',
					success: (res) => {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/userRegister/userRegister'
							});
						}, 1200);
					}
				});
			} else {
				this.getFxuserIsFollow();
			}
		},

		// 获取套餐知识库接口
		getPackageKnowledge() {
			this.$request('/getPackageKnowledge?package_id=' + this.knowledgeId, {}, 'GET').then((res) => {
				if (res.code == 1) {
					this.knowledgeDetail = res.data;
					if (this.knowledgeDetail) {
						this.showKnowledgeBase = true;
					}
				} else {
					uni.showToast({
						title: '获取套餐知识库失败',
						icon: 'none'
					});
					return;
				}
			});
		},

		// 分享
		handleShare(val) {
			const that = this;
			if (val == '保存本地') {
				that.saveImg();
			} else if (val == '复制链接') {
				uni.setClipboardData({
					data: that.promotionSahreUrl,
					success: (res) => {
						uni.showToast({
							title: '复制链接成功',
							icon: 'none'
						});
					}
				});
			} else if (val == '微信好友') {
				let originalUrl = that.promotionSahreUrl.split('?')[1];
				// let originalUrl = that.promotionSahreUrl
				let url = parseQueryString(originalUrl);
				let packageId = url.package_id;
				let agentId = url.agent_id;
				let fxuserId = url.fxuser_id;
				let level = url.level;
				let agentProId = url.agent_pro_id;
				// 换成我的小店页面
				that.share.path =
					'/pages/quertDetail/quertDetail?package_id=' +
					packageId +
					'&agent_id=' +
					agentId +
					'&fxuser_id=' +
					fxuserId +
					'&level=' +
					level +
					'&agent_pro_id=' +
					agentProId;
			} else if (val == '朋友圈') {
				let originalUrl = that.promotionSahreUrl.split('?')[1];
				let url = parseQueryString(originalUrl);
				let packageId = url.package_id;
				let agentId = url.agent_id;
				let fxuserId = url.fxuser_id;
				let level = url.level;
				let agentProId = url.agent_pro_id;
				// 换成我的小店页面
				this.share.path =
					'/pages/quertDetail/quertDetail?package_id=' +
					packageId +
					'&agent_id=' +
					agentId +
					'&fxuser_id=' +
					fxuserId +
					'&level=' +
					level +
					'&agent_pro_id=' +
					agentProId;
				uni.showToast({
					title: '请点击右上角三个点进行分享朋友圈',
					icon: 'none'
				});
			}
		},

		saveImg() {
			let that = this;
			//获取授权列表，查看是否授权写入相册权限
			uni.downloadFile({
				url: that.promotionSahreImg,
				success: (res) => {
					if (res.statusCode === 200) {
						that.saveimgtoAlbum(res.tempFilePath);
					} else {
						uni.showToast({
							title: '保存失败',
							icon: 'error',
							duration: 2000
						});
					}
				}
			});
		},
		saveimgtoAlbum(imgurl) {
			//图片保存到本地
			let that = this;
			uni.showLoading();
			uni.saveImageToPhotosAlbum({
				filePath: imgurl,
				success: function (data) {
					uni.hideLoading();
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						duration: 2000
					});
				},
				fail: function (err) {
					uni.hideLoading();
					if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
						uni.openSetting({
							success(settingdata) {
								if (settingdata.authSetting['scope.writePhotosAlbum']) {
									uni.showToast({
										title: '您已授权成功，请重新保存海报',
										icon: 'success',
										duration: 2000
									});
								} else {
									uni.showToast({
										title: '尚未授权，无法保存海报',
										icon: 'none',
										duration: 2000
									});
								}
							}
						});
					}
				},
				complete(res) {}
			});
		},

		// 关闭分享弹窗清空图片字段
		handleCloseShare() {
			this.promotionImg = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.hot_package_box {
	display: flex;
	align-items: center;
	padding: 26rpx 0 28rpx;
	margin-left: 20rpx;

	.hot_package_line {
		width: 9rpx;
		height: 33rpx;
		background: #4f96ff;
		box-shadow: 0px 0px 8rpx 0px rgba(242, 242, 242, 0.36);
		border-radius: 5rpx;
	}

	.hot_package_title {
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 34rpx;
		color: #262626;
		padding-left: 33rpx;
	}
}

.home_package_box {
	position: relative;
	background: #ffffff;
	box-shadow: 0px 6rpx 6rpx 1px #ececec;
	border-radius: 16rpx;
	border: 1px solid #f5f5f5;
	margin-bottom: 12rpx;
	padding: 25rpx 0 18rpx 22rpx;
	margin: 20rpx 20rpx;

	.home_package_all {
		display: flex;

		.package_top_img {
			position: absolute;
			top: 0;
			left: 22rpx;
			width: 44rpx;
			height: 61rpx;
			z-index: 998;

			.top_img {
				width: 100%;
				height: 100%;
			}
		}

		.package_all_box {
			width: 224rpx;
			height: 237rpx;
			margin-right: 40rpx;

			.package_all_img {
				width: 100%;
				height: 100%;
			}
		}

		.package_all_con {
			width: 375rpx;

			.package_title {
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #1a1a1a;
			}

			.pacakge_tip_box {
				display: flex;
				flex-wrap: wrap;
				padding-top: 10rpx;

				.pacakge_tip_all {
					padding: 0 6rpx;
					border-radius: 6rpx;
					margin: 0 6rpx 6rpx 0;
				}

				.package_tip_free {
					background: #ffe8d6;
					color: #ff7b0c;
					font-size: 24rpx;
					padding: 3rpx 4rpx;
					margin-right: 20rpx;
				}

				.package_tip_official {
					background: #e4ffe8;
					color: #2fc247;
					font-size: 24rpx;
					padding: 3rpx 4rpx;
				}
			}

			.package_tip {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				margin: 16rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.package_flow_box {
				display: flex;
				align-items: center;

				.package_flow {
					display: flex;
					flex-direction: column;
					align-items: center;

					.flow_title {
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 29rpx;
						color: #262626;
					}

					.flow_name {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #808080;
					}
				}

				.flow_line {
					width: 2rpx;
					height: 31rpx;
					background: #e6e6e6;
					border: 2rpx solid #e6e6e6;
					margin: 0 28rpx;
				}
			}

			.package_commission {
				font-family: my-font;
				font-weight: 500;
				font-size: 26rpx;
				color: #f4281d;
				padding-top: 25rpx;
			}

			.package_btn_box {
				display: flex;
				justify-content: flex-end;

				.package_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 155rpx;
					height: 53rpx;
					background: linear-gradient(143deg, #fb8377, #f4271c);
					box-shadow: 0px 4rpx 2rpx 0px rgba(255, 195, 192, 0.74);
					border-radius: 27rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 27rpx;
					color: #ffffff;
				}
			}
		}
	}

	.package_bottom_box {
		padding-top: 37rpx;

		.package_tip {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 26rpx;
			color: #333;
			line-height: 38rpx;
			padding: 0 30rpx 25rpx 0;
		}

		.package_commission {
			font-family: Source Han Sans CN;
			font-weight: 550;
			font-size: 31rpx;
			color: #f4281d;
		}

		.package_btn_box {
			margin-right: 20rpx;

			.package_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160rpx;
				height: 59rpx;
				background: linear-gradient(143deg, #fb8377, #f4271c);
				box-shadow: 0px 4rpx 2rpx 0px rgba(255, 195, 192, 0.74);
				border-radius: 27rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 29rpx;
				color: #ffffff;
			}
		}
	}

	.home_package_other {
		padding-top: 16rpx;
		margin-top: 26rpx;
		border-top: 1px solid #f5f5f5;

		.handle_age_box:last-child {
			padding-bottom: 0;
		}

		.handle_age_box {
			display: flex;
			padding-bottom: 17rpx;

			.age_icon_box {
				width: 26rpx;
				height: 26rpx;
				margin-right: 15rpx;

				.age_icon {
					width: 100%;
					height: 100%;
				}
			}

			.age_title {
				width: 632rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
			}
		}
	}
}

.bottom_box {
	text-align: center;
	color: #ccc;
	padding: 30rpx 0 20rpx;
}

.popup_official_box {
	width: 550rpx;
	height: 550rpx;

	.popup_official_img {
		width: 100%;
		height: 100%;
	}
}

.popup_official_title {
	text-align: center;
	padding-bottom: 20rpx;
}

.popup_share_box {
	.share_img_box {
		width: 550rpx;
		height: 930rpx;

		.share_img {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
			-webkit-touch-callout: default; // 要配置这行关键代码，不然可能不生效
		}
	}

	.share_btn_box {
		display: flex;
		justify-content: space-evenly;
		padding: 16rpx 0;

		.share_btn_all {
			display: flex;
			flex-direction: column;
			align-items: center;

			.share_btn_img {
				width: 72rpx;
				height: 72rpx;

				.btn_img {
					width: 100%;
					height: 100%;
				}
			}

			.share_btn_title {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				padding-top: 6rpx;
			}
		}
	}

	.save_image_title {
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 28rpx;
		color: red;
		text-align: center;
		padding-bottom: 20rpx;
	}
}

::v-deep .u-drawer {
	z-index: 999 !important;
}
</style>
